<template>
  <div>
    <!-- v-for循环渲染arr -->
    <!-- 把当前点击的name通过selected传给data里的active -->
    <!-- 判断如果active的值与当前点击的name相同 则给当前点击的div加上active样式 -->
    <div
      id="box"
      v-for="(item, index) in arr"
      :key="index"
      @click="main(item.name)"
      :class="{ active: active == item.name }"
    >
      {{ item.name }}
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      name: 'index',
      arr: [
        { name: '詹姆斯' },
        { name: '乔丹' },
        { name: '科比' },
        { name: '李小龙' },
        { name: '姚明' }
      ],
      active: '詹姆斯'
    }
  },
  methods: {
    main (name) {
      this.active = name
      console.log(this.active) // 切换加样式,移除兄弟的样式,对象的取值要相当的熟悉
    }
  }
}
</script>
<style>
.active {
  background-color: orange;
  color: white;
}
#box {
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
  border: 1px solid #000;
  text-align: center;
  line-height: 100px;
}
</style>
